﻿<template>
  <div v-loading = 'loading'>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent'>
      <!-- 检索部分 -->
      <div class = 'page_searchContent'>
        <el-input placeholder = "请输入事件名称或者编号进行检索" v-model = 'searchKey' prefix-icon = "el-icon-search" clearable></el-input>
      </div>
      <!-- 表格部分 -->
      <el-form :model = 'ruleForm' :rules = 'rules' ref = 'ruleForm'>
        <div class = 'page_tableContent'>
          <el-table :data = 'ruleForm.tableData' style = 'width:100%' empty-text = '暂无数据，请点击左下方按钮添加' border stripe>
            <el-table-column :render-header = "handelHelpKey" label = '事件编号' align = 'center'>
              <template slot-scope = 'scope'>
                <el-form-item :prop="'tableData[' + scope.$index + '].no'" :rules='rules.no'>
                  <el-input :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model = 'scope.row.no' placeholder = '请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :render-header = "handelHelpKey" label = '事件名称' align = 'center' labelClassName = '事件名称不能为空且不要重复，建议采用中文字符'>
              <template slot-scope = 'scope'>
                <el-form-item :prop = "'tableData[' + scope.$index + '].name'" :rules = 'rules.name'>
                  <el-input :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model = 'scope.row.name' placeholder='请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :render-header = "handelHelpKey" label='事件分类' align='center' labelClassName = '事件分类用于将元数据事件和自定义事件进行分离，设计开发人员只可以定义自定义事件，而元数据事件则围绕元数据的结构进行定义'>
              <template slot-scope = 'scope'>
                <el-form-item :prop = "'tableData[' + scope.$index + '].category'" :rules = 'rules.category'>
                  <el-select v-model = 'scope.row.category' placeholder = '请选择' disabled>
                    <el-option label = '自定义事件' value = 'Customerize'></el-option>
                    <el-option label = '元数据事件' value = 'MetaData'></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label = '事件描述' align = 'center' show-overflow-tooltip>
              <template slot-scope = 'scope'>
                <el-form-item>
                  <el-input :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-model = 'scope.row.desc' placeholder = '请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label = '事件参数设定' align = 'center'>
              <template slot-scope = 'scope'>
                <span class = "editStatus"
                @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(scope.row, scope.$index, 'params') : editTableCloumn(scope.row, scope.$index, 'params')">
                  {{scope.row.request_parameters ? '......' : '请输入'}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label = '响应数据定义' align = 'center'>
              <template slot-scope = 'scope'>
                <span class = "editStatus"
                @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(scope.row, scope.$index, 'response') : editTableCloumn(scope.row, scope.$index, 'response')">
                  {{scope.row.response_data ? '......' : '请输入'}}
                </span>
              </template>
            </el-table-column>
            <el-table-column label = "操作" align = "center" width = '80'>
              <template slot-scope = "scope">
                <el-button type = 'text' :disabled = "operationType === 'edit' || (operationType === 'add' && scope.row.newData !== 'newData')" @click="handleSingleDelete(scope.row, scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class = 'page_bottomContent'>
          <div class = 'page_btnsContent'>
            <el-form-item class = 'form_noLeftMargin' >
              <el-button type = "primary" @click = 'addData()' :disabled = "operationType === 'edit'">添加事件</el-button>
              <el-button type = "primary" @click = 'editData()' :disabled = "operationType === 'edit' || operationType === 'add'">编辑事件</el-button>
              <el-button type = "primary" @click = "resetForm ('ruleForm')" v-if = "operationType === 'edit' || operationType === 'add'">取&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
              <el-button type = "primary" @click = "submitForm ('ruleForm', operationType)" v-if = "operationType === 'edit' || operationType === 'add'">确&nbsp;&nbsp;&nbsp;&nbsp;定</el-button>
            </el-form-item>
          </div>
          <div class = 'page_paginationContent'>
            <el-pagination style = 'text-align:right;padding:15px 0 25px 0'
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :pager-count = "5"
            :page-size = 'pageSize'
            :page-sizes = "[10, 25, 50, 100]"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'
            v-if = "operationType !== 'edit' && operationType !== 'add' && totalLength" >
            </el-pagination>
          </div>
        </div>
      </el-form>
    </div>
    <Edit-Parameters :editInfo = 'editInfo' :showParamsDialog = "currentShowDialog === 'params'" @giveUp = "currentShowDialog = ''" @sureEdit = 'sureEdit'></Edit-Parameters>
    <Edit-Response :editInfo = 'editInfo' :showResponseDialog = "currentShowDialog === 'response'" @giveUp = "currentShowDialog = ''" @sureEdit = 'sureEdit'></Edit-Response>
  </div>
</template>

<script src='./workflowEvents.js'></script>
